３年技術授業用のテストページ

■ ディジタル作品「清川中のPR」の作り方

1. チーム内での分担を確認し、絵コンテを仕上げる。
2. コンテンツプログラミングシステム_prprの紹介を見て、作り方を理解する 。
3. public_htmlフォルダの中の pr41.html（41の部分は自分の出席番号）をダブルクリックしてGoogleChromeで表示。。
4. meryを起動し、ファイル(F)-開く(O)で pr41.html を開く。
5. preditorを開く。
6. 絵コンテに従い、preditorで見出しや文章を打つ。画像の挿入の注意点（１～４）に従い、写真選び・コピー・縮小をし、画像を挿入する。「時短ワザ」を使って、すばやく１枚のスライドを仕上げる。
7. preditorで編集後、右上のコードビューボタンを押して「ソースコード表示」にし、全て選択(CTRL+A)・コピー(CTRL+C)して、meryで pr41.html の<section>タグ内に貼りつけ(CTRL+V)る。
8. Meryで、CTRL+SHIFT+Sでスニペットを挿入する。リンクは、最低「前へ」「次へ」を挿入する。必要に応じて、アニメーションを作成・挿入する。
9. Meryで編集後、ファイル(F)-上書き保存(S) で上書き保存する。pr41.htmlのChromeでF5キーを押して、表示を更新する。
10. 新たにスライドを追加するには、meryでスニペット「スライド－空スライド挿入」をする。今編集しているpreditorの上部の突起(タブ)を 右クリック－タブを複製 するか、新たに preditor をクリックして開くかして編集する。あとは、６．～９．を繰り返して個人の分担を完成させる。
    

    preditor-Chrome(編集)　→　pr41.html-Mery(保存)　→　pr41.html-Chrome(表示)　→　…

    ※つまり、preditorで編集したものをMeryに貼りつけて保存し、Chromeで正しく表示されているか確認する作業を繰り返せばよい。
11. 最後に、チームごとにリンクさせる。

■ HTMLファイルについて【 ハンドブックp101より 】

• Webページは、HTML（ハイパー・テキスト・マークアップ・ランゲージ）という言語で記述されている。
• HTMLファイルは、テキストファイルなので、テキストエディタ（メモ帳、Meryなど）で編集できる。
• Webページの中身のテキストを見たいときは、右クリックして、ページのソースを表示(V)をクリック。
• <H1>などのHTMLタグがWebページの構造を表わしている。
• <A>タグ…リンクを表わす。
• <IMG>タグ…画像ファイルを表示する。
• <STYLE>タグ…ページの見え方をCSSで記述する。例：赤字になったテキスト
• <SCRIPT>タグ…ページの動作をJavaScirptで記述する。

■ 画像ファイルについて【 教科書p206～207より 】

• 画像ファイルには、ビットマップ画像とベクトル画像の２種類がある。
• ビットマップは点の集まりで、ベクトルは線の集まり。
• 画像処理は、ペイント系とドロー系のソフトウェアで行う。
• デイジーピクチャーで.jpgや.pngをInkscapeで.svgを編集する。
• デイジーピクチャーの「画像の学習」で解説されている。
• kuchi*.htmlのstartボタンを押すと変形のアニメーションが始まる。SVGというベクトル画像は、JavaScriptで操作しやすい。
• スイカの絵を見ると、ベクトル画像は大きくしてもきれいに表示されることがわかる。
• デジカメやスキャナから取り込んだ写真や絵は、ビットマップ画像。Inkscapeのパス(P)-ビットマップのトレース(T)でベクトル画像に変換することができる。
• 逆に、SVGから、ファイル(F)-PNG画像にエクスポート(E)することもできる。

■ 情報モラルについて【 教科書p198～201・212より 】

• 文章や画像などの素材には、著作権や肖像権があるので、正しく利用しなければならない。
  　　　→ 情報モラル・セキュリティコンクールに挑戦しよう。
• 自分で作ることができれば、権利を気にせずに使うことができる。
• 文章に比べて画像の作成は難しいが、人工知能の助けを借りる方法もある。 https://www.autodraw.com/
• 適当に絵を描くと、きれいなイラストの候補が示されるので、イメージに合うものを選択する。さらに描き加えてもよい。
• よい絵ができたら、左上の三マークをクリックしてDownloadする。
• Inkscapeに読み込んで、ベクトル化しておくとよい。

■ 以前のテストページ